<template>
	<custom-navbar title="基本信息" bgColor="#fff" textColor="#333" />
	<view class="user-info-page">
		<!-- 表单内容区 -->
		<form  class="info-form">
			<!-- 昵称 -->
			<view class="form-item">
				<view class="label">昵称</view>
				<input type="text" v-model.trim="userInfo.nickName" placeholder="请输入昵称" maxlength="20" class="input">
				</input>
			</view>

			<!-- 手机号码 -->
			<view class="form-item">
				<view class="label">手机号码</view>
				<view class="input-container">
					<input type="number" v-model.trim="userInfo.phonenumber" placeholder="请输入手机号码" maxlength="11"
						class="input"></input>
				</view>
			</view>

			<view class="form-item">
				<view class="label">邮箱</view>
				<input type="text" v-model.trim="userInfo.email" placeholder="请输入邮箱" class="input"></input>
			</view>

			<!-- 性别 -->
			<view class="form-item">
				<view class="label">性别</view>
				<view class="gender-options">
					<radio-group @change="radioChange">
						<label class="gender-label" v-for="(item, index) in sexItems" :key="item.value">
							<view>
								<radio :value="item.value" :checked="item.value==userInfo.sex" />
							</view>
							<view>{{item.name}}</view>
						</label>
					</radio-group>
				</view>
			</view>
		</form>
	</view>
	<view class="toolbar-cls">
		<button size="default" type="primary" @click="updateHandler">
			保存
		</button>
	</view>
</template>

<script setup>
	import CustomNavbar from '@/components/CustomNavbar.vue';
	import {
		getInfo,
		profile
	} from '@/api/userInfo.js'
	import {
		useRouter,
		toast,
		getStorageSync,
		compareDateTime
	} from '@/utils/index.js'
	import {
		ref,
		reactive,
		onMounted,
		computed
	} from 'vue';
import { use } from 'echarts';
	// 表单数据
	const userInfo = reactive({
		nickName: '',
		phonenumber: '',
		email: '',
		sex: '0' // 0-男, 1-女
	});
	const sexItems = [{
		name: '男',
		value: '0'
	}, {
		name: '女',
		value: '1'
	}]
	// 表单验证
	const validateForm = () => {
		if (!userInfo.nickName) {
			toast('请输入昵称');
			return false;
		}

		if (userInfo.phonenumber && !/^1[3-9]\d{9}$/.test(userInfo.phonenumber)) {
			toast('请输入正确的手机号码');
			return false;
		}

		if (userInfo.email && !/^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(userInfo.email)) {
			toast('请输入正确的邮箱地址');
			return false;
		}

		return true;
	};
	onMounted(()=>{
		getInfo().then(res=>{
			userInfo.email=res.user.email
			userInfo.phonenumber=res.user.phonenumber
			userInfo.sex=res.user.sex
			userInfo.nickName=res.user.nickName
		})
	})
	const radioChange = (e) => {
		userInfo.sex = e.detail.value
	}
	const updateHandler = () => {
		if (!validateForm()) {
			return;
		}
		profile(userInfo).then(res=>{
			useRouter('/pages/my/my',{},"switchTab")
		})
	}
</script>
<style scoped>
	.user-info-page {
		min-height: 100vh;
		background-color: #f4f5f7;
		padding: 64px 16px 16px 16px;
		box-sizing: border-box;

	}

	/* 表单样式 */
	.info-form {
		background-color: #fff;
		margin-top: 10px;
	}

	.form-item {
		display: flex;
		align-items: center;
		padding: 12px 16px;
		background: #fff;
		margin-bottom: 10px;
		border-radius: 10px;
	}

	.label {
		width: 80px;
		font-size: 16px;
		color: #333;
	}

	.input {
		flex: 1;
		font-size: 16px;
		color: #333;
		padding: 5px 0;
		min-height: 30px;
	}

	.upload-btn {
		margin-left: 16px;
		display: flex;
		align-items: center;
		color: #007aff;
		font-size: 14px;
	}

	.upload-btn text {
		margin-left: 5px;
	}

	/* 手机号区域 */
	.input-container {
		flex: 1;
		display: flex;
		align-items: center;
	}

	.verify-btn {
		min-width: 100px;
		height: 30px;
		line-height: 30px;
		background-color: #f5f5f5;
		color: #007aff;
		font-size: 14px;
		border-radius: 4px;
		padding: 0 10px;
		margin-left: 10px;
	}

	.verify-btn:disabled {
		color: #999;
		background-color: #eee;
	}

	/* 性别选择 */
	uni-radio-group {
		display: flex;
	}

	.gender-label {
		display: flex;
		align-items: center;
		margin-right: 24px;
		font-size: 16px;
		color: #333;

	}

	.gender-label radio {
		margin-right: 6px;
	}

	/* 成功提示弹窗 */
	.success-popup {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		width: 200px;
		padding: 20px;
		background-color: rgba(0, 0, 0, 0.8);
		border-radius: 10px;
		color: #fff;
	}

	.success-text {
		margin-top: 15px;
		font-size: 16px;
	}

	.toolbar-cls {
		background: #fff;
		position: fixed;
		left: 0;
		bottom: 0;
		width: 100%;
	}
</style>